Bab 2 - Atribut HTML

Pengertian Atribut HTML

Atribut HTML adalah informasi tambahan yang ditulis di dalam tag pembuka sebuah elemen HTML. Atribut digunakan untuk memberi detail seperti alamat tautan, sumber gambar, teks alternatif, gaya tampilan, identitas elemen, dan lain-lain.

Secara umum, atribut memiliki bentuk:

Pola atribut HTML

<Tag namaAtribut="valueataunilaiAtribut">Isi elemen</Tag>

Inti penting: atribut selalu ditulis pada tag pembuka. Contohnya href pada tag <a>, atau src pada tag <img>.

Daftar Beberapa Atribut

Berikut beberapa atribut HTML yang sering muncul ketika belajar dasar HTML.

alt

Menentukan teks alternatif untuk gambar ketika gambar tidak dapat ditampilkan.

disabled

Menentukan bahwa elemen input atau tombol sedang dinonaktifkan.

href

Menentukan alamat tujuan pada tautan.

Menentukan identitas unik untuk sebuah elemen HTML.

src

Menentukan sumber file, biasanya dipakai pada gambar, video, atau script.

style

Menentukan gaya CSS langsung di dalam elemen HTML.

title

Menentukan informasi tambahan yang biasanya muncul ketika kursor diarahkan ke elemen.

Atribut href

Atribut href digunakan pada tag <a> untuk menentukan alamat tujuan tautan.

Contoh href

<a href="https://www.google.com">Buka Google</a>

Hasil di browser

Buka Google

Atribut src

Atribut src digunakan untuk menentukan sumber file. Pada tag gambar, atribut ini menunjukkan lokasi file gambar.

Contoh src sederhana

<img src="img_apple.jpg" alt="Gambar apel">

Jika gambar berada di dalam folder lain, maka path harus disesuaikan.

Contoh src di folder lain

<img src="folder/img_apple.jpg" alt="Gambar apel">

Atribut alt

Atribut alt digunakan untuk memberikan teks alternatif pada gambar. Teks ini penting karena akan membantu ketika gambar gagal dimuat atau ketika halaman dibaca oleh screen reader.

Contoh alt

<img src="logo.png" alt="Logo Web">

Saran: jangan isi alt asal-asalan. Tulis deskripsi singkat yang menjelaskan gambar tersebut.

Atribut style

Atribut style digunakan untuk menulis CSS langsung di dalam elemen HTML. Cara ini disebut inline CSS.

Contoh style

<p style="color: blue;">Teks ini berwarna biru.</p>

Catatan: inline CSS boleh dipakai untuk belajar, tetapi untuk project yang lebih rapi, CSS sebaiknya dipisah ke dalam file .css.

Atribut title

Atribut title digunakan untuk memberikan informasi tambahan pada elemen. Pada banyak browser, teks title akan muncul ketika kursor diarahkan ke elemen tersebut.

Contoh title

<p title="informasi tambahan">Arahkan kursor ke teks ini.</p>

Atribut id

Atribut id digunakan untuk memberikan identitas unik pada sebuah elemen. Dalam satu halaman, nilai id sebaiknya tidak digunakan berulang.

Contoh id

<h2 id="materi-html">Materi HTML</h2>

Atribut id sering dipakai untuk navigasi menuju bagian tertentu di halaman.

Contoh link ke id

<a href="#materi-html">ke Materi HTML</a>

Atribut disabled

Atribut disabled digunakan untuk menonaktifkan elemen input atau tombol. Elemen yang diberi atribut ini tidak dapat digunakan oleh pengguna.

Contoh disabled

<button disabled>Tombol Tidak Aktif</button>

Kesimpulan bab: atribut membuat elemen HTML menjadi lebih spesifik. Dengan atribut, sebuah tag tidak hanya memiliki struktur, tetapi juga dapat memiliki tujuan, alamat, identitas, gaya, dan perilaku tertentu.

Ujian Bab 2

Link ujian disediakan sebagai latihan opsional.

Buka Ujian Bab 2

Selesai